import { Component } from 'react';
import { NavBar,Radio,Button, Toast,Empty } from 'react-vant';
import WithRouter from '../../router/WithRouter';
import './index.less'
import {getAddressList,setDefaultAddress,removeAddress} from '@/Api/user'
import { Edit, Delete } from '@react-vant/icons'
class AddRess extends Component {
    state = {
        list:[],
        defaultItem:null,
        type:null
    }
    render() {
        let {defaultItem,list,type} = this.state;
        return (
            <div id='address'>
                <NavBar
                    title="收货地址"
                    onClickLeft={()=>{
                        if(type===0){
                                 // 将当前收货地址存储到本地
                            localStorage.setItem("address",JSON.stringify(defaultItem))
                            // 将当前新添加得收货地址返回给上个页面
                            this.props.router.navigate(-1)
                       
                            return
                        }
                        this.props.router.navigate(-1)
                    }}
                />
                <div>
                <Radio.Group value={defaultItem} onChange={async (name)=>{
                    this.setState({
                        defaultItem:name
                    })
                    // 发送请求设为默认收货地址
                    let res = await setDefaultAddress({id:name.id});
                    if(type===0){
                        localStorage.setItem("address",JSON.stringify(name))
                        this.props.router.navigate(-1)
                    }
                }}>
                {
                        this.state.list.map((item, index) => {
                            return (
                                <div className='list' key={index}>
                                    <div className='username'>
                                        收货人：{item.realName} {item.phone}
                                    </div>
                                    <div className='addressinfo'>
                                        收货地址：{item.province}{item.city}{item.district}{item.detail}
                                    </div>
                                    <div className='actions'>
                                        <div>
                                            <Radio name={item}>设为默认</Radio>
                                        </div>
                                        <div className='edit'>
                                            <span onClick={()=>{
                                                  this.props.router.navigate(`/add/address?addressId=${item.id}`)
                                            }}><Edit color='#444'></Edit> 编辑</span>
                                            <span onClick={()=>this.remove(item.id)}><Delete color='#444'></Delete>删除</span>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                    </Radio.Group>
                </div>
                {/* 空状态 */}
                {
                    list.length===0 &&  <Empty description="暂无收货地址" />
                }
                <div className='btn'>
                    <Button block type="danger" round onClick={()=>{
                        this.props.router.navigate('/add/address')
                    }}>添加收货地址</Button>
                </div>
            </div>
        )
    }
    async componentDidMount(){
        // 获取路径传递得type
        if(this.props.router.location.state){
            let {type} = this.props.router.location.state;
            this.setState({
                type:0
             })
        }else{
             this.setState({
                type:null
             })
        }
        let res = await getAddressList();
        console.log(res)
        res.data.data.list.forEach(item=>{
            if(item.isDefault){
                this.setState({
                    defaultItem:item
                })
            }
        })
        this.setState({
            list:res.data.data.list
        })
    }
    // 删除收货地址
    async remove(id){
        let {list} = this.state;
        let res = await removeAddress({id:id});
        if(res.data.code===200){
            Toast.success("删除成功");
            let index = list.findIndex(item=>item.id === id);
            list.splice(index,1);
            this.setState({
                list:list
            })
        }else{
            Toast(res.data.message)
        }
    }
}
export default WithRouter(AddRess);